<template>
  <div id="changePhone">
    <div class="verifyForm">
      <h3>步骤一:旧手机验证</h3>
      <el-form ref="form" :model="form1" label-width="100px">
        <el-form-item label="旧手机号:" required>
          <el-input v-model="form1.phone" disabled></el-input>
        </el-form-item>
        <el-form-item label="验证码:" required style="position: relative">
          <el-input v-model="form1.code"></el-input>
          <el-button class="code" type="primary" @click="getCode(1)">获取</el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="verify1">
        验证
      </el-button>
    </div>

    <div class="verifyForm">
      <h3>步骤二:新手机验证</h3>
      <el-form ref="form" :model="form2" label-width="100px">
        <el-form-item label="新手机号:" required>
          <el-input v-model="form2.newPhone" :disabled="!process"></el-input>
        </el-form-item>
        <el-form-item label="验证码:" required style="position: relative">
          <el-input v-model="form2.code" :disabled="!process"></el-input>
          <el-button class="code"
                     :disabled="!process"
                     type="primary"
                     @click="getCode(2)">获取</el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary"
                 :disabled="!process"
                 @click="verify2">验证</el-button>
    </div>

  </div>
</template>

<script>
  import axios from "axios";

  export default {
    name: "changePhone",
    inject:['reload'],
    mounted() {
      this.form1.phone = this.$store.getters.getInfo.ber_phone
    },
    data(){
      return{
        form1:{
          phone:'',
          code:''
        },
        form2:{
          phone: '',
          newPhone : '',
          code:''
        },
        process : false
      }
    },
    methods:{
      getCode(index){
        let params = {}
        let url
        if(index == 1){
          params.phone = this.form1.phone
          url = 'https://haotry.top/api/verify/changeBindingPhoneVerification'
        }
        else{
          params.phone = this.form2.newPhone
          url = 'https://haotry.top/api/verify/bindingPhoneVerification'
        }
        if(params.phone.length === 0){
          alert('请填写手机号！')
          return;
        }
        params.user = 'BUYER'
        axios.post(url,JSON.stringify(params),{
          headers:{
            'Content-Type':'application/json'
          }
        }).then(res => {
          console.log(res)
          let data = res.data
          alert('验证码已发送，注意查收！')
          if(data.status === 200){
            console.log(data)
          }
        })
      },
      verify1(){
        axios.post('https://haotry.top/api/buyer/confirmBindingPhone',JSON.stringify(this.form1),{
          headers:{
            'Content-Type':'application/json'
          }
        }).then(res => {
          let data = res.data
          if(data.status === 200){
            console.log(data)
            alert('验证成功')
            this.process = true
          }
          else{
            alert(data.msg)
          }
        })
      },
      verify2(){
        this.form2.phone = this.form1.phone
        console.log(this.form2)
        axios.post('https://haotry.top/api/buyer/changeBindingPhone',JSON.stringify(this.form2),{
          headers:{
            'Content-Type':'application/json'
          }
        }).then(res => {
          let data = res.data
          if(data.status === 200){
            alert('换绑成功')
            console.log(data)
            console.log(data.data)
            sessionStorage.setItem('info',JSON.stringify(data.data))
            this.$store.commit('setInfo',{info:data.data})
              this.$router.push('/buyer/account/company')
          }
          else{
            alert(data.msg)
          }
        })
      }
    }
  }
</script>

<style scoped>
  #changePhone{
    display: flex;
    flex-wrap: wrap;
  }
  .verifyForm{
    margin: 60px;
    width: 400px;
  }
  .code{
    position: absolute;
    top: 0;
    left: 320px;
  }
</style>